<!--
 * @description: Headling config dialog 
 * @Date: 2023-04-11 12:21:15
 * @example: 
 * @params: 
-->
<template>
  <div class="contaienr">
    <div class="ComShow">
      <HeadlineCom
        :title="HeadlineConfig.title"
        :font-size="HeadlineConfig.fontSize"
        :text-align="HeadlineConfig.textAlign"
        :back-ground-col="HeadlineConfig.backGroundCol"
        :gradient-color="HeadlineConfig.gradientColor"
      />
    </div>
    <div class="ComConfig">
      <!-- titleConfig -->
      <div class="titleConfig">
        <span class="title">Title</span>
        <div class="title_input">
          <el-input
            v-model="HeadlineConfig.title"
            placeholder="Type something"
            :prefix-icon="EditPen"
          />
        </div>
      </div>
      <!-- HideBack -->
      <div class="switchConfig">
        <el-switch
          v-model="HeadlineConfig.backGroundCol"
          size="large"
          active-text="Background Trasprant"
        />
        <br />
        <el-switch
          v-model="HeadlineConfig.textAlign"
          size="large"
          active-text="Center text"
        />
      </div>
      <!-- Size -->
      <div class="titleConfig">
        <span class="title">Size</span>
        <div class="title_input">
          <el-select
            v-model="HeadlineConfig.fontSize"
            placeholder="Select"
            size="large"
          >
            <el-option label="SIZE1" value="15px" />
            <el-option label="SIZE2" value="25px" />
            <el-option label="SIZE3" value="35px" />
          </el-select>
        </div>
      </div>
      <div class="titleConfig">
        <span class="title">Tint Color</span>
        <div class="title_input">
          <color-picker
            v-model:pureColor="HeadlineConfig.gradientColor"
            format="hex6"
            shape="circle"
            useType="both"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import HeadlineCom from "./HeadlineCom.vue";
import { EditPen } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import http from "@/views/project/config/index";
import { ref,onMounted,reactive} from "vue";
import { string } from "vue-types";

const props = defineProps({
  editval:{
        type: Object,
        default:() => {}
    },
  opera:{
    type:String,
    default:() => "Add"
  }
});
const widgetid = ref()
const HeadlineConfig = reactive({
  title: "",
  fontSize: "15px",
  backGroundCol: false,
  textAlign: false,
  gradientColor: "#dedede",
});
onMounted(()=>{
  if(props.opera === 'Edit'){
    const resEditval  = JSON.parse(props.editval.Widget_config)
    widgetid.value = props.editval.Widget_id
    Object.keys(resEditval).forEach(item=>{
       HeadlineConfig[item] = resEditval[item]
    })
  }
})


const handleRestData = () => {
  (HeadlineConfig.backGroundCol = false),
    (HeadlineConfig.title = ""),
    (HeadlineConfig.fontSize = "15px"),
    (HeadlineConfig.textAlign = false),
    (HeadlineConfig.gradientColor = "#dedede");
};

const handleGetTotalnums = async () => {
  const res = await http.getWidgetList();
  const num = res?.data?.data.length;
  return num;
};

/** 新增模块 */
const handleSubmitData = async () => {
  const TotalNum = await handleGetTotalnums();
  const data = {
    Widget_title: "DemoTEST",
    type: "headLine",
    Widget_config: JSON.stringify(HeadlineConfig),
    x: (TotalNum * 2) % 90,
    y: TotalNum + 90,
    h: 8,
    w: 30,
    i: TotalNum,
  };
  /** 请求数据 */
  http.handleAddLayout(data).then((res) => {
    if (res.isSuccess) {
      ElMessage({ message: "添加成功!", type: "success" });
    }
  });
};
/** 编辑模块 */
const handleEditdata = () => {
  console.log("编辑数据拉")
  const params = {
    id:widgetid.value,
    config:JSON.stringify(HeadlineConfig)
  }
  http.handleEditLayout(params).then((res)=>{
    console.log("res---",res)
    if(res.data.isSuccess){
      ElMessage.success("修改成功!")
    }
  })
}

defineExpose({
  handleRestData,
  handleSubmitData,
  handleEditdata
});
</script>
<style lang="less">
.contaienr {
  display: flex;
  flex-direction: column;
  width: 100%;

  .ComConfig {
    margin-top: 20px;
    // border: 1px solid red;
    display: flex;
    flex-direction: column;
    // height: 500px;
    .titleConfig {
      margin-top: 20px;
      .title {
        display: block;
        font-size: 18px;
        font-weight: bold;
      }
      .title_input {
        margin: 10px 0 0 40px;
        .el-input {
          width: 70%;
          height: 40px;
        }
      }
    }
    .switchConfig {
      margin: 10px 0 0 40px;
    }
  }
}
</style>
